<template>
  <view class="footprint-container">
    <!-- <u-navbar title="浏览记录" :custom-back="handleClose">
      <view v-if="!isMP" slot="right" class="u-p-l-20 u-p-r-20" style="color: #666666;">
        <view class="" v-if="footPrintsList && footPrintsList.length">
          <text v-if="!isEdit" class="u-m-r-15" @click="handleClearFootPrints">清空</text>
          <text v-if="!isEdit" class="u-m-r-15" @click="handleEditFootPrints">编辑</text>
          <text v-if="isEdit" @click="handleFinishedFootPrints">完成</text>
        </view>
      </view>
    </u-navbar> -->
    <!-- <view class="footprint-edit" v-if="footPrintsList && footPrintsList.length && isMP">
      <text v-if="!isEdit" class="u-m-r-15" @click="handleClearFootPrints">清空</text>
      <text v-if="!isEdit" class="u-m-r-15" @click="handleEditFootPrints">编辑</text>
      <text v-if="isEdit" @click="handleFinishedFootPrints">完成</text>
    </view> -->

    <u-navbar :border-bottom="false" :is-back="false" title="" :background="{backgroundColor: 'rgba(0,0,0,0)'}">
      <view class="navbars u-f-ac u-f-jsb">
        <view class="u-f1">
          <u-icon @click="$u.route({type: 'back', delta: 1})" name="arrow-left" size="34" color="#fff"></u-icon>
        </view>
        <view class="u-f-ajc">
          <image src="/static/images/header.png" mode="widthFix"></image>
        </view>
        <view class="u-f1" style="text-align: right;">
          <!-- <u-button type="error" size="mini" :custom-style="customStyle" @click="showPopup=true">汇购预排</u-button> -->
        </view>
      </view>
    </u-navbar>

    <view class="num_box f-w-700 u-f-ajc u-f-column">
      <view>浏览记录</view>
    </view>

    <view class="message-container">
      <view class="tabs-view2 u-f-ac u-f-jsa">
        <view class="tabs_item u-f-ajc" v-if="!isEdit" @click="handleClearFootPrints">清空</view>
        <view class="tabs_item tabs_active u-f-ajc" v-if="!isEdit" @click="handleEditFootPrints">编辑</view>
        <view class="tabs_item tabs_active u-f-ajc" v-if="isEdit" @click="handleFinishedFootPrints">完成</view>
      </view>
      <mescroll-body ref="mescrollRef" :top="isMP ? '0' : ''" :down="down" @init="mescrollInit" @down="downCallback"
        @up="upCallback">
        <uni-swipe-action>
          <view v-for="(item, index) in footPrintsList" :key="index">
            <view class="item u-border-bottom">
              <view class="footDate u-f-ajc">{{ item.time | unixToDate('yyyy-MM-dd') }}</view>
              <uni-swipe-action-item v-for="(goods, _index) in item.history" :key="_index" ref="goodslist"
                :show="goods.show" :auto-close="false">
                <navigator :url="'/goods-module/goods?goods_id='+ goods.goods_id" hover-class="none"
                  style="width: 100%;">
                  <goods-cell-search :goodsName="goods.goods_name" :goodsImg="goods.goods_img"
                    :goodsPrice="goods.goods_price" :goodsCommentNum="-1" :goodsBuyCount="-1"></goods-cell-search>
                </navigator>
                <view class="good-check u-flex" slot="left" @click="handleChangeCheck(goods)">
                  <u-icon :color="goods.checked ? '#FD5B00' : ''" size="38" :name="goods.checked ? 'xuanze' : 'choose'"
                    custom-prefix="custom-icon"></u-icon>
                </view>
                <view class="del-sku u-flex" slot="right" @click='handleDeleteFootPrintsId(goods)'>
                  删除
                </view>
              </uni-swipe-action-item>
            </view>
          </view>
        </uni-swipe-action>
      </mescroll-body>
      <view class="settlement u-flex u-row-between" v-if="isEdit">
        <view class="u-flex" @click="handleCheckAll">
          <u-icon :color="checkedAll ? '#FD5B00' : ''" size="38" :name="checkedAll ? 'xuanze' : 'choose'"
            custom-prefix="custom-icon"></u-icon>
          <text class="u-m-l-10">全选</text>
        </view>
        <view class="">
          <view class="del-btn" @click="handleDeleteAll">删除</view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  // 引入mescroll-mixins.js
  import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
  import * as API_Members from '@/api/members.js';
  export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
      return {
        footPrintsList: [],
        down: {
          auto: false //是否在初始化完毕之后自动执行一次下拉刷新的回调
        },
        params: {
          page_no: 0,
          page_size: 10
        },
        isEdit: false, // 是否是编辑状态
        checkedAll: false, // 是否全选
        // #ifdef APP-NVUE || H5
        isMP: false,
        // #endif
        // #ifdef MP-WEIXIN
        isMP: true,
        // #endif
      };
    },
    onLoad() {
      // 页面返回刷新
      uni.$on('goodsback', () => {
        this.downCallback()
      });
    },
    methods: {
      // 下拉刷新
      downCallback() {
        this.params.page_no = 1
        this.footPrintsList = []
        this.mescroll.resetUpScroll(true)
      },
      // 上拉加载
      upCallback(page) {
        this.params.page_no = page.num
        this.getFootprints()
      },
      // 获取我的足迹列表
      getFootprints() {
        API_Members.queryHistoryList(this.params).then(res => {
          const {
            data
          } = res
          data.forEach(key => {
            key.history.forEach(item => {
              item.checked = false
            })
          })
          this.isEdit = false
          this.footPrintsList.push(...data)
          this.mescroll.endBySize(data.length, res.data_total)
        })
      },
      // 左滑删除会员足迹
      handleDeleteFootPrintsId(goods) {
        API_Members.deleteHistoryListId(goods.id).then(res => {
          this.downCallback()
        })
      },
      // 清空我的足迹
      handleClearFootPrints() {
        API_Members.clearHistoryList().then(_ => {
          this.footPrintsList = []
          this.downCallback()
        })
      },
      // 编辑我的足迹
      handleEditFootPrints() {
        if (this.$refs.goodslist) {
          this.isEdit = true
          this.footPrintsList.forEach(key => {
            key.history.forEach(item => {
              item.show = "left"
            })
          })
        }
      },
      // 编辑完成
      handleFinishedFootPrints() {
        if (this.$refs.goodslist) {
          this.isEdit = false
          // 重置所有选择框为未选中状态
          this.footPrintsList.forEach(key => {
            key.history.forEach(item => {
              item.checked = false
              item.show = "none"
            })
          })
          this.checkedAll = false
        }
      },
      // 点击勾选/不勾选
      handleChangeCheck(goods) {
        goods.checked = !goods.checked
        // 检测是否全选
        const isCheckedAll = this.footPrintsList.every(key => {
          return key.history.every(item => item.checked)
        })
        // 如果是全选
        this.checkedAll = isCheckedAll
      },
      // 执行全选
      handleCheckAll() {
        this.checkedAll = !this.checkedAll
        this.footPrintsList.forEach(key => {
          key.history.forEach(item => {
            item.checked = this.checkedAll
          })
        })
      },
      // 删除选择
      handleDeleteAll() {
        this.footPrintsList.forEach(key => {
          key.history.forEach(item => {
            if (item.checked) {
              API_Members.deleteHistoryListId(item.id).then(res => {})
            }
          })
        })
        this.downCallback()
        this.handleFinishedFootPrints()
      },
      //自定义返回按钮
      handleClose() {
        console.log('自定义返回')
        // #ifdef H5
        const pages = getCurrentPages()
        if (pages.length > 1) {
          uni.navigateBack(1)
          return
        }
        //使用vue-router返回上一级
        let a = this.$router.go(-1)
        if (a == undefined) {
          //重新定向跳转页面
          uni.switchTab({
            url: '/pages/tabs/mine/mine'
          });
        }
        return
        // #endif
        uni.navigateBack(1)
      }
    }
  }
</script>

<style lang="scss">
  .footDate {
    padding: 20rpx;
    color: #888;
    // background: #fff;
    // border-top: 1rpx solid #f1f1f1;
    // border-bottom: 1rpx solid #f1f1f1;
  }

  .good-check {
    width: 150rpx;
    justify-content: center;
    background-color: #FFFFFF;
  }

  .del-sku {
    background-color: #FD5B00;
    width: 150rpx;
    color: #FFFFFF;
    font-weight: 600;
    justify-content: center;
  }

  .footprint-edit {
    background-color: #FFFFFF;
    position: fixed;
    text-align: right;
    padding-right: 20rpx;
    right: 0;
    width: 100%;
    z-index: 99;
    height: 70rpx;
    line-height: 70rpx;
  }

  .settlement {
    position: fixed;
    z-index: 99;
    bottom: 0;
    left: 0;
    margin-top: 100rpx;
    background-color: #ffffff;
    height: 100rpx;
    width: 100%;
    padding-left: 20rpx;

    .del-btn {
      color: #FFFFFF;
      font-size: 30rpx;
      padding: 0 80rpx;
      height: 100rpx;
      line-height: 100rpx;
      background-color: #FD5B00;
    }
  }
</style>


<style lang="scss">
  page {
    width: 100%;
    background: url(/static/images/bg.png) no-repeat 0 0;
    background-size: cover;
  }

  .num_box {
    padding: 30rpx 0 60rpx;
    color: #FFDDAE;

    >view:nth-of-type(1) {
      font-size: 60rpx;
    }
  }

  .message-container {
    background-color: #F4F5F7;
    border-radius: 40rpx 40rpx 0 0;
    padding: 50rpx 30rpx 0;
  }

  .tabs-view2 {
    width: 100%;
    // border-radius: 50rpx;
    // overflow: hidden;
    // border: 2px solid #FF1634;
    margin-bottom: 30rpx;

    .tabs_item {
      width: 47%;
      height: 66rpx;
      color: #fff;
      background: url(/static/images/member/tabs_item.png) no-repeat 0 0;
      background-size: cover;
      box-sizing: border-box;
    }

    .tabs_active {
      background: url(/static/images/member/tabs_active.png) no-repeat 0 0;
      background-size: cover;
    }
  }

  /deep/ .goods-view {
    padding: 20rpx !important;
    border-radius: 20rpx !important;
    margin-bottom: 30rpx !important;
  }

  /deep/ .u-image {
    width: 160rpx !important;
    height: 160rpx !important;
  }
</style>